<template>
  <div class="price-content">
    <a-tabs v-model="activeKey" v-if="tabs.length > 1" @change="changeTab">
      <a-tab-pane :key="index + 1" :tab="item" v-for="(item, index) in tabs">
        <div class="card">
          <div class="title">{{ cardName }}</div>
          <div class="table">
            <el-table
              ref="table1"
              :data="tableData"
              style="width: 100%"
              v-if="activeKey == 1"
            >
              <el-table-column prop="id" label="包裹id"> </el-table-column>
              <el-table-column prop="classification" label="分类">
              </el-table-column>
              <el-table-column prop="department" label="科室">
              </el-table-column>
              <el-table-column prop="username" label="回收人员">
              </el-table-column>
              <el-table-column prop="recycle_time" label="回收时间">
              </el-table-column>
              <el-table-column prop="weight" label="重量-kg"> </el-table-column>
              <!-- <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="zancun(scope.row)" type="text" size="small"
                    >暂存</el-button
                  >
                </template>
              </el-table-column> -->
            </el-table>
            <el-table
              ref="table2"
              :data="tableData2"
              style="width: 100%"
              v-if="activeKey == 2"
            >
              <el-table-column prop="package_id" label="包裹id">
              </el-table-column>
              <el-table-column prop="username" label="接收人员" width="150">
              </el-table-column>
              <el-table-column prop="receive_time" label="接收时间">
              </el-table-column>
              <el-table-column prop="receive_weight" label="接收时重量-kg">
              </el-table-column>
              <el-table-column prop="out_time" label="运出时间">
              </el-table-column>
              <el-table-column
                prop="out_weight"
                label="运出时重量-kg"
              ></el-table-column>
              <!-- <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    v-if="!scope.row.out_time"
                    @click="yunchu(scope.row)"
                    type="text"
                    size="small"
                    >运出</el-button
                  >
                </template>
              </el-table-column> -->
            </el-table>
            <el-table
              ref="table3"
              :data="tableData3"
              style="width: 100%"
              v-if="activeKey == 3"
            >
              <el-table-column prop="package_id" label="包裹id">
              </el-table-column>
              <el-table-column prop="username" label="转运人员" width="150">
              </el-table-column>
              <el-table-column prop="transfer_vehicle_id" label="车辆号码">
              </el-table-column>
              <el-table-column prop="start_time" label="出发时间">
              </el-table-column>
              <el-table-column prop="end_time" label="到达时间">
              </el-table-column>

              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button @click="mapFun(scope.row)" type="text" size="small"
                    >查看轨迹</el-button
                  >
                  <!-- <el-button @click="handle(scope.row)" type="text" size="small"
                    >处理</el-button
                  > -->
                </template>
              </el-table-column>
            </el-table>
            <el-table
            ref="table4"
              :data="tableData4"
              style="width: 100%"
              v-if="activeKey == 4"
            >
              <el-table-column prop="package_id" label="包裹id">
              </el-table-column>
              <el-table-column
                prop="username"
                label="处理站接收人员"
                width="250"
              >
              </el-table-column>
              <el-table-column prop="receive_weight" label="接收重量-kg">
              </el-table-column>
              <el-table-column prop="receive_time" label="接收时间">
              </el-table-column>
            </el-table>
          </div>
        </div>
    
      </a-tab-pane>
    </a-tabs>
        <el-dialog
      title="暂存"
      :visible.sync="dialogVisibleZancun"
      width="30%"
      :before-close="handleCloseZancun"
    >
      <div>
        <el-form
          size="mini"
          :model="ruleFormZancun"
          :rules="rulesZancun"
          ref="ruleFormZancun"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="接收重量" prop="receive_weight">
            <el-input
              style="width: 100%"
              v-model="ruleFormZancun.receive_weight"
            ></el-input>
          </el-form-item>
          <el-form-item label="接收人员" prop="receiver_id">
            <el-select
              style="width: 100%"
              v-model="ruleFormZancun.receiver_id"
              placeholder="请选择接收人员"
            >
              <el-option
                :key="item.id"
                v-for="item in zancunUser"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisibleZancun = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="doZancun"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="转运"
      :visible.sync="dialogVisibleYunchu"
      width="30%"
      :before-close="handleCloseYunchu"
    >
      <div>
        <el-form
          size="mini"
          :model="ruleFormYunchu"
          :rules="rulesYunchu"
          ref="ruleFormYunchu"
          label-width="140px"
          class="demo-ruleForm"
        >
          <el-form-item label="运出重量" prop="out_weight">
            <el-input
              style="width: 100%"
              v-model="ruleFormYunchu.out_weight"
            ></el-input>
          </el-form-item>
          <el-form-item label="转运人员" prop="transfer_person_id">
            <el-select
              style="width: 100%"
              v-model="ruleFormYunchu.transfer_person_id"
              placeholder="请选择转运人员"
            >
              <el-option
                :key="item.id"
                v-for="item in yunchuUser"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="转运车辆牌照" prop="transfer_vehicle_id">
            <el-input
              style="width: 100%"
              v-model="ruleFormYunchu.transfer_vehicle_id"
            ></el-input>
          </el-form-item>
          <el-form-item label="车辆轨迹坐标" prop="track_points">
            <el-input
              style="width: 100%"
              v-model="ruleFormYunchu.track_points"
            ></el-input>
          </el-form-item>
          <el-form-item label="出发时间" prop="start_time">
            <el-date-picker
              v-model="ruleFormYunchu.start_time"
              type="datetime"
              placeholder="选择出发时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="到达时间" prop="end_time">
            <el-date-picker
              v-model="ruleFormYunchu.end_time"
              type="datetime"
              placeholder="选择到达时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisibleYunchu = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="doYunchu"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="处理"
      :visible.sync="dialogVisibleHandle"
      width="30%"
      :before-close="handleCloseHandle"
    >
      <div>
        <el-form
          size="mini"
          :model="ruleFormHandle"
          :rules="rulesHandle"
          ref="ruleFormHandle"
          label-width="140px"
          class="demo-ruleForm"
        >
          <el-form-item label="接收重量" prop="receive_weight">
            <el-input
              style="width: 100%"
              v-model="ruleFormHandle.receive_weight"
            ></el-input>
          </el-form-item>
          <el-form-item label="转运人员" prop="receiver_id">
            <el-select
              style="width: 100%"
              v-model="ruleFormHandle.receiver_id"
              placeholder="处理站接收人员"
            >
              <el-option
                :key="item.id"
                v-for="item in handleUser"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisibleHandle = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="doHandle"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <a-modal
      :title="modalTitle"
      width="1200px"
      :visible="addDialog"
      @ok="handleOkAdd"
      @cancel="addDialog = false"
    >
      <div class="flex-center" style="gap: 10px">
        <div>司机：{{ filter.username }}</div>
        <div>车牌号：{{ filter.transfer_vehicle_id }}</div>
        <div>出发时间：{{ filter.start_time }}</div>
      </div>

      <div class="map">
        <div id="container"></div>
        <div class="input-card">
          <h4>轨迹回放控制</h4>
          <div class="input-item">
            <input
              type="button"
              class="btn"
              value="开始动画"
              id="start"
              @click="startAnimation()"
            />
            <input
              type="button"
              class="btn"
              value="暂停动画"
              id="pause"
              @click="pauseAnimation()"
            />
          </div>
          <div class="input-item">
            <input
              type="button"
              class="btn"
              value="继续动画"
              id="resume"
              @click="resumeAnimation()"
            />
            <input
              type="button"
              class="btn"
              value="变速动画"
              id="stop"
              @click="changeSpeed()"
            />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  getWasteInfo,
  getAllStaffPost,
  getStageInfo,
  getTransport,
  getReceiveInfo,
  addStageInfo,
  updateStageInfo,
  addTransInfo,
  addHandle,
} from "../../../service";
import moment from "moment";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "Price",
  data() {
    return {
      activeKey: 1,
      packageId: 1,
      cardName: "",
      tabs: ["科室回收信息", "暂存间期间信息", "转运信息", "处理信息"],
      tableData: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      userList: [],
      filter: {
        username: "",
        start_time: "",
        transfer_vehicle_id: "",
      },
      addDialog: false,
      speed: 1,
      map: {},
      marker: {},
      lineArr: [],
      dialogVisibleZancun: false,
      dialogVisibleYunchu: false,
      dialogVisibleHandle: false,
      zancunUser: [],
      yunchuUser: [],
      handleUser: [],
      getWasteInfo: [],
      ruleFormZancun: {},
      ruleFormYunchu: {},
      ruleFormHandle: {},
      rulesZancun: {
        receive_weight: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        receiver_id: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      rulesHandle: {
        receive_weight: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        receiver_id: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      rulesYunchu: {
        out_weight: [{ required: true, message: "不能为空", trigger: "blur" }],
        transfer_person_id: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        transfer_vehicle_id: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        track_points: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        start_time: [{ required: true, message: "不能为空", trigger: "blur" }],
        end_time: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      modalTitle: '',

    };
  },
  watch: {
    $route(to) {
      if (to.path === "/page/process") {
        console.log(sessionStorage.getItem('package_id'))
        if (sessionStorage.getItem('package_id')) {
          this.packageId = sessionStorage.getItem('package_id')
        } else {
          this.packageId = 1;
        }
        this.init();
      }
    },
  },
  created() {
    this.init();
    this.changeTab();
  },
  methods: {
    init() {
      console.log(this.packageId)
      getAllStaffPost().then((user) => {
        this.userList = user.data.data;
        this.zancunUser = this.userList.filter((v) => v.role === "暂存人员");
        this.yunchuUser = this.userList.filter((v) => v.role === "转运人员");
        this.handleUser = this.userList.filter((v) => v.role === "处理人员");
        getWasteInfo({
          package_id: this.packageId,
        }).then(async (res) => {
          for (let item of res.data) {
            if (this.userList.find((v) => v.id === item.recycle_person_id)) {
              item.username = this.userList.find(
                (v) => v.id === item.recycle_person_id
              ).name;
            }
            if (item.recycle_time) {
              item.recycle_time = moment(item.recycle_time).format(
                "YYYY-MM-DD HH:mm:ss"
              );
            }
          }
          this.tableData = res.data;
        });
        getStageInfo({
          package_id: this.packageId,
        }).then(async (res) => {
          for (let item of res.data) {
            if (this.userList.find((v) => v.id === item.receiver_id)) {
              item.username = this.userList.find(
                (v) => v.id === item.receiver_id
              ).name;
            }
            item.out_time = item.out_time
              ? moment(item.out_time).format("YYYY-MM-DD HH:mm:ss")
              : "";
            item.receive_time = moment(item.receive_time).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          }
          this.tableData2 = res.data;
        });

        getReceiveInfo({
          package_id: this.packageId,
        }).then(async (res) => {
          for (let item of res.data) {
            if (this.userList.find((v) => v.id === item.receiver_id)) {
              item.username = this.userList.find(
                (v) => v.id === item.receiver_id
              ).name;
            }
            item.receive_time = moment(item.receive_time).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          }
          this.tableData4 = res.data;
        });

        getTransport({
          package_id: this.packageId,
        }).then((res) => {
          for (let item of res.data.data) {
            if (this.userList.find((v) => v.id == item.transfer_person_id)) {
              item.username = this.userList.find(
                (v) => v.id == item.transfer_person_id
              ).name;
            }
            item.start_time = moment(item.start_time).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            item.end_time = moment(item.end_time).format("YYYY-MM-DD HH:mm:ss");
          }
          this.tableData3 = res.data.data;
        });
      });
    },
    handleCloseHandle() {
      this.dialogVisibleHandle = false;
    },
    handleCloseZancun() {
      this.dialogVisibleZancun = false;
    },
    handleCloseYunchu() {
      this.dialogVisibleYunchu = false;
    },
    startAnimation() {
      this.marker.moveAlong(this.lineArr, 120, (e) => {
        return e * this.speed > 1 ? 1 : e * this.speed;
      });
    },
    pauseAnimation() {
      this.marker.pauseMove();
    },
    resumeAnimation() {
      this.marker.resumeMove();
    },
    changeSpeed() {
      this.marker.pauseMove();
      this.speed = this.speed === 4 ? 2 : 4;
      this.marker.resumeMove();
    },
    changeTab() {
      this.cardName = this.tabs[this.activeKey - 1];
    },
    mapFun(rs) {
      console.log(rs)
      this.addDialog = true;
      this.modalTitle = "轨迹";
      this.filter = rs;
      this.lineArr = JSON.parse(rs.track_points);
      this.lineArr = [[118.715756,30.908008], [118.721485,30.906627], [118.733458,30.917673], [118.74431,30.915625]]
      const center = this.lineArr.slice(Math.floor(this.lineArr.legnth / 2), 1);
      this.$nextTick(() => {
        setTimeout(() => {
          AMapLoader.load({
            key: "33f9bb8c080e641a62d3453a34ee9376", // 申请好的Web端开发者Key，首次调用 load 时必填
          }).then((AMap) => {
            this.map = new AMap.Map("container", {
              center: center[0],
              zoom: 15,
            });

            this.marker = new AMap.Marker({
              map: this.map,
              position: this.lineArr[0],
              icon: "https://webapi.amap.com/images/car.png",
              offset: new AMap.Pixel(-26, -13),
              autoRotation: true,
              angle: -90,
            });

            // 小汽车还未走的路
            var polyline = new AMap.Polyline({
              map: this.map,
              path: this.lineArr,
              showDir: true,
              strokeColor: "#28F", //线颜色
              strokeWeight: 6, //线宽
            });
            // 小汽车已经走过的路线
            var passedPolyline = new AMap.Polyline({
              map: this.map,
              strokeColor: "#AF5", //线颜色
              strokeWeight: 6, //线宽
            });
            //监听小车移动事件
            this.marker.on("moving", function (e) {
              passedPolyline.setPath(e.passedPath);
            });
            // 可以加个这个方法  这个让屏幕 聚焦在小汽车
            this.map.setFitView();
          });
        }, 100);
      });
    },
    handleOkAdd() {
      this.addDialog = false;
    },
    zancun(row) {
      this.currentRow1 = row;
      this.dialogVisibleZancun = true;
      this.ruleFormZancun = {
        receive_weight: "",
        receiver_id: "",
      };
    },
    yunchu(row) {
      this.currentRow2 = row;
      this.dialogVisibleYunchu = true;
      this.ruleFormYunchu = {
        out_weight: "",
        transfer_person_id: "",
        transfer_vehicle_id: "",
        track_points:
          "[[118.784687,30.939939], [118.795685,30.929949], [118.805685,30.926949], [118.815685,30.916949], [118.825685,30.900949], [118.825685,30.800949]]",
        start_time: "",
        end_time: "",
      };
    },
    doZancun() {
      this.$refs["ruleFormZancun"].validate((valid) => {
        if (valid) {
          addStageInfo({
            ...this.ruleFormZancun,
            package_id: this.currentRow1.id,
            receive_time: moment().format("YYYY-MM-DD HH:mm:ss"),
            out_time: "",
            out_weight: "",
          }).then((res) => {
            if (res.code === 200) {
              this.init();
              this.$message.success("操作成功");
              this.dialogVisibleZancun = false;
            }
          });
        }
      });
    },
    doYunchu() {
      this.$refs["ruleFormYunchu"].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.ruleFormYunchu));
          delete params.id;
          delete params.out_weight;
          params.package_id = this.currentRow2.package_id;
          // 修改暂存表
          updateStageInfo(this.currentRow2.id, {
            out_weight: this.ruleFormYunchu.out_weight,
            out_time: moment().format("YYYY-MM-DD"),
          }).then((res) => {
            // 新增转运表
            addTransInfo(params).then((rs) => {
              if (res.code === 200) {
                this.init();
                this.$message.success("操作成功");
                this.dialogVisibleYunchu = false;
              }
            });
          });
        }
      });
    },
    handle(row) {
      this.currentRow2 = row;
      this.ruleFormHandle = {
        receive_weight: "",
        receiver_id: "",
      };
      this.dialogVisibleHandle = true;
    },
    doHandle() {
      this.$refs["ruleFormHandle"].validate((valid) => {
        if (valid) {
          // 修改暂存表
          addHandle({
            ...this.ruleFormHandle,
            package_id: this.currentRow2.package_id,
            receive_time: moment().format("YYYY-MM-DD HH:mm:ss"),
          }).then((res) => {
            if (res.data && res.data.code === 500) {
              this.$message.error(res.data.msg);
              return;
            }
            this.init();
            this.$message.success("操作成功");
            this.dialogVisibleHandle = false;
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.card {
  background: #fff;
}
.title {
  padding: 12px 20px;
  border-bottom: 1px solid lightgray;
  font-weight: bold;
  font-size: 16px;
}
.list {
  padding: 20px;
  .row {
    display: flex;
    align-items: center;
    gap: 30px;
  }
}

.input-card .btn {
  margin-right: 1.2rem;
  width: 6rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}

.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 16rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-color: transparent;
  background-image: none;
  color: #25a5f7;
  border-color: #25a5f7;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  border-radius: 1rem;
  -webkit-appearance: button;
  cursor: pointer;
  margin-bottom: 10px;
}
</style>
